import React from 'react'
import { Form, Icon, Input, Button, Checkbox,Card } from 'antd';

import {connect} from 'react-redux'
import {Redirect} from 'react-router-dom'
import './index.less'

import {LoginGo} from '../../actions/login'


 class Login extends React.Component {
    constructor() {
        super()
    }

    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
       
            this.props.LoginGo(values)
          }
        });
      };
    render() {
       
        
        const { getFieldDecorator } = this.props.form;
        return (
            this.props.isLogin?
            <Redirect  to='/admin'/>
            :
            <Card title="登录" style={{ width: 400 }}  className='card-box'>
                    <Form onSubmit={this.handleSubmit} className="login-form">
              <Form.Item>
                {getFieldDecorator('username', {
                  rules: [{ required: true, message: '请输入用户名' }],
                })(
                  <Input
                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    placeholder="Username"
                    disabled={this.props.isLading}
                  />,
                )}
              </Form.Item>
              <Form.Item>
                {getFieldDecorator('password', {
                  rules: [{ required: true, message: '请输入密码' }],
                })(
                  <Input
                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    type="password"
                    placeholder="Password"
                    disabled={this.props.isLading}
                  />,
                )}
              </Form.Item>
              <Form.Item>
                {getFieldDecorator('remember', {
                  valuePropName: 'checked',
                  initialValue: true,
                })(<Checkbox  disabled={this.props.isLading}>记住我</Checkbox>)}
               
                <Button type="primary" htmlType="submit" className="login-form-button"loading={this.props.isLading}>
              登录
                </Button>
           
              </Form.Item>
            </Form>

            </Card>
         
            
          );
    }
}


const mapState = (state) => {
  
    
    return {
        isLading:state.Login.isLading,
        isLogin:state.Login.isLogin
    }

}
export default Form.create({ name: 'normal_login' })(connect(mapState, { LoginGo })(Login));